<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>在线编辑器——HTML混合</title>
  <!-- <meta name="about" content="支持HTML编辑混合模式【html,css,js】。支持标签自动闭合，支持emmet。"> -->

	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/codemirror.css">
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/theme/night.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/addon/hint/show-hint.css">

  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/codemirror.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/addon/hint/show-hint.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/addon/edit/closetag.js"></script>
  
  <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/doc/docs.css"> -->

  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/javascript/javascript.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/addon/edit/closetag.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/addon/hint/html-hint.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/xml/xml.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/javascript/javascript.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/css/css.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/htmlmixed/htmlmixed.js"></script>
  <!-- <script src="<{$cm}>emmet/emmet.min.js"></script> -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/clike/clike.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/php/php.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/addon/dialog/dialog.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/addon/search/searchcursor.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/keymap/vim.js"></script>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/addon/dialog/dialog.css">
  <style type="text/css">
    *{
      font-family: "微软雅黑";
      font-size: 14px;
    }
    .CodeMirror {
      display: block;
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
    }
  </style>
</head>
<body>
	<div id="editor">
		<form>
      <textarea id="code" name="code"><{$ctt}></textarea>
    </form>
	</div>
<script src="http://j-ui.com/js/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
var json_dir = $.ajax({
      url: "<{:U("file/code")}>?file=<{$_GET["file"]}>",
      async: false
     }).responseText;

var json_dir=eval("["+json_dir+"]")[0];
$("#code").val(json_dir["content"]);
      
$(document).ready(function() {
      CodeMirror.commands.save = function(){
        var content=editor.doc.getValue();
        var result=$.ajax({
          type: "POST",
          url: "<{:U("file/save")}>",
          data: {'file': '<{$_GET["file"]}>', 'content': content},
          async: false
         }).responseText;
        result=eval('['+result+']')[0];
        alert(result["msg"]);
      };

      var editor_theme=window.localStorage.getItem('editor_theme');
      if (editor_theme=='night'||editor_theme=='default') {} else{
        editor_theme='default';
      };
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: json_dir["type"],
        styleActiveLine: true,
    		lineNumbers: true,
    		lineWrapping: true,
        autoCloseTags: true,
        keyMap: "vim",
        showCursorWhenSelecting: true,
    		theme:editor_theme,
        profile:'xhtml',//emmet support
      });

});
</script>

</body>
</html>